<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/echarts.js"></script>
    <script src="../../js/setdate.js"></script>
    <script src="../../libs/My97DatePicker/4.8/WdatePicker.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>到课率横向比</title>
    <style type="text/css">
        .leftChart{
            height: 400px;
            flex: 1
        }
        .rightChart{
            height: 400px;
            flex: 1.5
        }
    </style>
</head>
<body>
<div id="rrapp" v-cloak>
        <el-select
                v-model="yearValue"
                multiple
                collapse-tags
                size="small"
                style="margin-left: 20px;width: 150px"
                placeholder="请选择学年">
            <el-option
                    v-for="item in yearOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-select
                v-model="termValue"
                multiple
                collapse-tags
                size="small"
                style="margin-left: 20px;width: 150px"
                placeholder="请选择学期">
            <el-option
                    v-for="item in termOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-select
                v-model="weekValue"
                multiple
                collapse-tags
                size="small"
                style="margin-left: 20px;width: 150px"
                placeholder="请选择教学周">
            <el-option
                    v-for="item in weekOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-select
                v-model="dayValue"
                multiple
                collapse-tags
                size="small"
                style="margin-left: 20px;width: 150px"
                placeholder="请选择星期几">
            <el-option
                    v-for="item in dayOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-select
                v-model="indexValue"
                multiple
                collapse-tags
                size="small"
                style="margin-left: 20px;width: 150px"
                placeholder="请选择第几节">
            <el-option
                    v-for="item in indexOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
    <!-- 选择菜单 -->
    <div id="menuLayer" style="display: none;padding:10px;">
        <ul id="zTree" class="ztree"></ul>
    </div>
<div class="search-container" >
    <div class="select-container" >
        <input type="text" class="mySelect" style="cursor:pointer;" v-model="profession.name" @click="teacherTree" readonly="readonly" placeholder="请选择班级"/>
    </div>
    <div class="select-container">
        <input type="text" class="mySelect" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="startDate" name="startDate" placeholder="开始时间"/>
    </div>
    <div class="select-container">
        <input type="text" class="mySelect" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="endDate" name="endDate"  placeholder="结束时间"/>
    </div>
    <div class="btn-container">
        <a class="btn-thin" onclick="query()">查询</a>
    </div>
    <div class="btn-container">
        <span  class="normal-btn normal-color" onclick="setDate('1')">今日</span>
        <span  class="normal-btn normal-color" onclick="setDate('2')">本周</span>
        <span  class="normal-btn normal-color" onclick="setDate('3')">本月</span>
    </div>
    <div style="flex: 3;">
    </div>
</div>
</div>
    <div id="chartsContainer" style="height:500px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
        <!--到课率-->
        <div  class="leftChart" id="attendanceRate"></div>
        <div  id="attendanceRateTime" class="rightChart"></div>
    </div>
</body>
<script>
    // 基于准备好的dom，初始化echarts实例
    var attendanceRate = echarts.init(document.getElementById('attendanceRate'),'');
    var myChart = echarts.init(document.getElementById('attendanceRateTime'));//定义折线图显示的位置对象
    var attendanceRateOption  = {
        title : {
            text: '到课率',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['相符','不相符']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var option = {
        title: {
            text: '班级到课率趋势图'
        },
        legend: {
            data:[]
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [ {
            name:'邮件营销',
            type:'line',
            stack: '到课率',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
            {
                name:'联盟广告',
                type:'line',
                stack: '到课率',
                data:[220, 182, 191, 234, 290, 330, 310]
            },]
    };
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "menuId",
                pIdKey: "parentId",
                rootPId: -1
            },
            key: {
                url:"nourl"
            }
        },
        // check:{
        //     enable:true,
        //     nocheckInherit:true
        // }
    };
    var ztree;
    window.onresize = function(){
        attendanceRate.resize()
        myChart.resize()
    }
    $(function () {
        //加载菜单树
        $.get(baseURL + "/AttendenceCharts/getClassTreeByCollege", function(r){
            ztree = $.fn.zTree.init($("#zTree"), setting, r.r);
            //展开所有节点
            ztree.expandAll(false);
        });
    })
     function goString(data){
		var temp=""
		for(let i in data){
			if(i==data.length-1){
				temp+=('\''+data[i]+'\'')
			}else{
				temp+=('\''+data[i]+'\'')+','
			}
		}
		return temp
	}
    function query()
    {
       if(vm.profession.id==null){
           alert("请先选择班级");
       }else{
        vm.yearData=goString(vm.yearValue);
		vm.termData=goString(vm.termValue);
		vm.weekData=goString(vm.weekValue);
		vm.dayData=goString(vm.dayValue);
		vm.indexData=goString(vm.indexValue);
            $.ajax({
                url: baseURL + "allSchoolEcharts/getAttendanceClassHorizontalComparison",
                data: {
                    "academicYear":vm.yearData,
                    "academicTerm":vm.termData,
                    "academicWeek":vm.weekData,
                    "academicDay":vm.dayData,
                    "academicIndex":vm.indexData,
                    "className": vm.profession.id,
                    "startDate": $("#startDate").val(),
                    "endDate": $("#endDate").val()
                },
                success: function (r) {
                    attendanceRateOption.series[0].data=r.CoincidenceRate.series;
                    attendanceRateOption.legend.data=r.CoincidenceRate.legend;
                    attendanceRate.setOption(attendanceRateOption);
                    option.series = r.r.data;
                    option.xAxis = {
                        type: 'category',
                        data: r.r.xAxis
                    };
                    option.legend.data = r.r.legend;
                    myChart.setOption(option);
                }
            });
        }
    }
    var vm = new Vue({
        el:'#rrapp',
        data:{
            collageData:null,
            yearData:null,
            termData:null,
            weekData:null,
            dayData:null,
            indexData:null,
            collageValue:[],
            yearValue:[],
            termValue:[],
            weekValue:[],
            dayValue:[],
            indexValue:[],
            collageOptions:[],
            yearOptions:[],
            termOptions:[],
            weekOptions:[],
            dayOptions:[],
            indexOptions:[],
            showList: true,
            title: null,
            teacher:{
                id:null,
                name:null
            },
            menu:{
                parentName:null,
                parentId:0,
                type:1,
                orderNum:0
            },
            profession:{
                id:null,
                name:null
            }

        },
        mounted(){
         $.ajax({
            url: baseURL + "/college/getAllcollege",
            data: {},
            success: function (r) {
                for (i = 0; i < r.list.length; i++) {
                    var tempJson={
                        'value':r.list[i].collegeName,
                        'label':r.list[i].collegeName
                    }
                    vm.collageOptions.push(tempJson)
                }
            }
        });
        $.ajax({
            url: baseURL + "/term/getSchoolTerm",
            data: {},
            success: function (r) {
                for (i = 0; i < r.list.length; i++) {
                     var tempJson={
                        'value':r.list[i].schoolAcademicYear,
                        'label':r.list[i].schoolAcademicYear
                    }
                    vm.yearOptions.push(tempJson)
                }
            }
         });
         var listTerm=["1","2"];
         for (i = 0; i < listTerm.length; i++) {
            var tempJson={
                'value':listTerm[i],
                'label':"第"+listTerm[i]+"学期"
            }
            this.termOptions.push(tempJson)
         }
         for (i = 1; i < 21; i++) {
            var tempJson={
                'value':i,
                'label':"第"+i+"周"
            }
            this.weekOptions.push(tempJson)
         }
         for (i = 1; i < 8; i++) {
           var tempJson={
                'value':i,
                'label':"星期"+i
            }
            this.dayOptions.push(tempJson)
         }
         for (i = 1; i < 11; i+=2) {
            var tempJson={
                'value':i,
                'label':"第"+i+"节"
            }
            this.indexOptions.push(tempJson)
         }
    },
        methods: {
            query:function () {
                $.ajax({
                    url: baseURL + "TeacherPortrait/getTeacherEvaltionEcharts",
                    data: {
                        "teacherId":vm.teacher.id,
                        "startDate":$("#startDate").val(),
                        "endDate":$("#endDate").val()
                    },
                    success: function (r) {
                        // teacherEvaltionPie.series[0].data=r.dataPie;
                        // teacherEvaltionBar.series=r.dataBar;
                        teacherEvaltionPieRate.series[0].data=r.dataRate;
                        teacherEvaltionTimeLine.xAxis.data=r.timeLine.xData;
                        teacherEvaltionTimeLine.series[0].data=r.timeLine.seriesData;
                        teacherAttendancePie.series[0].data=r.teacherAttendancePie;
                        teacherAttendanceTimePie.series=r.teacherAttendanceTimePie.data;
                        teacherAttendanceTimePie.xAxis= {
                            type: 'category',
                            data:r.teacherAttendanceTimePie.xAxis
                        };
                        // mTeacherEvaltionPie.setOption(teacherEvaltionPie);
                        // mTeacherEvaltionBar.setOption(teacherEvaltionBar);
                        mTeacherAttendanceTimePie.setOption(teacherAttendanceTimePie);
                        mTeacherEvaltionPieRate.setOption(teacherEvaltionPieRate);
                        // mTeacherEvaltionRateBar.setOption(teacherEvaltionRateBar);
                        mTeacherAttendancePie.setOption(teacherAttendancePie);
                        mTeacherEvaltionTimeLine.setOption(teacherEvaltionTimeLine);
                    }
                });
            },
            getTeacher: function(){
                //加载菜单树
                $.get(baseURL + "AttendenceCharts/getClassTreeByCollege", function(r){
                    ztree = $.fn.zTree.init($("#teacherTree"), setting, r.list);
                    var node = ztree.getNodeByParam("menuId", vm.menu.parentId);
                    ztree.selectNode(node);
                })
                vm.imgUrl='';
            },
            teacherTree: function(){
                layer.open({
                    type: 1,
                    offset: '50px',
                    skin: 'layui-layer-molv',
                    title: "选择班级",
                    area: ['300px', '450px'],
                    shade: 0,
                    shadeClose: false,
                    content: jQuery("#menuLayer"),
                    btn: ['确定', '取消'],
                    btn1: function (index) {
                        var node = ztree.getSelectedNodes();
                        //选择上级菜单
                        vm.profession.id = node[0].menuId;
                        vm.profession.name = node[0].name;
                        layer.close(index);
                    }
                });
            }
        }
    });
</script>
</html>